<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Internet pizzeria - Orders ready to deliver</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAGaVKsN7Fq_fEe0RJPADRCBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR_HUEVtZQfC_2K48p4H3BMNKsMCQ"
      type="text/javascript"></script>
  <script src="functions.js"  type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

	var map = null;	
    var directions; 	
    var geocoder;
    var xmlhttp;
     
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        
		map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());                		
		
		geocoder = new GClientGeocoder(); 
		geocoder.getLatLng("${pizzeriaAddress}",function(point) {
            if (point) {
                map.setCenter(point, 13);   			    	
            }            
          }
        ); 
		
		directions = new GDirections(map, null);
		
			
      }
    }
    
   

	function atLeastOneOrderChecked(){
		var checkboxes = document.getElementsByName("orderId");
  		for (i=0;i<checkboxes.length;i++) 
		{
			if (checkboxes[i].checked){
		    	return true;
		    }
		}
		return false;
	}
	
	function getCheckedOrdersIds(){
		var checkboxes = document.getElementsByName("orderId");
		var ordersIdsString = "";
  		for (i=0;i<checkboxes.length;i++) 
		{
			if (checkboxes[i].checked){
		    	ordersIdsString+= checkboxes[i].value + "#";
		    }
		}
		return ordersIdsString;
	}
	
	function updateMap() {
		xmlhttp = new getXMLObject(); 
	  if(xmlhttp) {
	    xmlhttp.open("POST","optimalRoute",true); 
	    xmlhttp.onreadystatechange  = handleServerResponse;
	    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	    xmlhttp.send("orderIds=" + getCheckedOrdersIds()); 
	  }
	}

function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
     	var response = xmlhttp.responseXML.documentElement.firstChild.nodeValue;
		if (response != null && response != ""){
			var idsArray = response.split("#");
			var waypoints = new Array();
			waypoints[0] = "${pizzeriaAddress}";
  			var points = 1;
			for(var i=0; i<idsArray.length; i++){
				var addresElem = document.getElementById("address"+idsArray[i]);
		    	waypoints[points] = addresElem.innerHTML;
		    	points++;
			}
			directions.loadFromWaypoints(waypoints);
		}
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}

    </script>
</head>
<body onload="load()" onunload="GUnload()">	
<%@ include file="navigationMenu.jsp" %>
	<h2>Select orders to deliver</h2>
	<form method="post" action="updateOrdersInDelivery" onsubmit="return atLeastOneOrderChecked();">
	<table border='1'>
	<tr>
			<td>Order number</td>
			<td>Address</td>
			<td>Details</td>
			<td>Select</td>
	</tr>
	<c:forEach var="orderInfo" items="${orderInfos}">
	<tr>
		<td>${orderInfo.order.id}</td>
		<td id="address${orderInfo.order.id}">${orderInfo.order.delivery.streetAndNumber},${orderInfo.order.delivery.zipCode},${orderInfo.order.delivery.city}</td>
		<td>
			<c:forEach var="orderPizza" items="${orderInfo.pizzas}">
			${orderPizza.quantity} x ${orderPizza.product.name} 
			&nbsp;
			</c:forEach>
			<br/>
			<c:forEach var="orderDrink" items="${orderInfo.drinks}">
			${orderDrink.quantity} x ${orderDrink.product.name} 
			&nbsp;
			</c:forEach>
		</td>
		<td><input type="checkbox" name="orderId" value="${orderInfo.order.id}" onclick="updateMap();" /></td>
		
	
	
	
	</tr>
	</c:forEach>
	

	</table>
	<input type="submit" name="deliverymap_submit" value="Delivery map">
	<br/>
	 <div id="map" style="width: 75%; height: 600px; background-color: white; background-image: url('resources/ajax-loader.gif'); background-position: center; background-repeat: no-repeat;"></div>
   
	</form>		
</body>
</html>
